import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Pie } from '@ant-design/plots';

let data: any = [];
const data1 = [
    {
        type: '研一',
        value: 12,
    },
    {
        type: '研二',
        value: 13,
    },
    {
        type: '研三',
        value: 11,
    },
    {
        type: '延期',
        value: 1,
    },
];
const data2 = [
    {
        type: '博一',
        value: 3,
    },
    {
        type: '博二',
        value: 4,
    },
    {
        type: '博三',
        value: 4,
    },
    {
        type: '博四',
        value: 5,
    },
    {
        type: '延期',
        value: 2,
    },
];
const data3 = [
    {
        type: '一年级',
        value: 1,
    },
    {
        type: '二年级',
        value: 2,
    },
    {
        type: '三年级',
        value: 2,
    },
    {
        type: '延期',
        value: 1,
    },
];
const DemoPie = ({ type }: any) => {
    if (type === "1") {
        data = data1;
    } else if (type === "2") {
        data = data2;
    } else {
        data = data3;
    }
    const config = {
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.7,
        legend: false,
        label: false,
        // statistic: false,
        tooltip: false,
        interactions: [
            {
                type: 'pie-statistic-active',
            },
        ],
        statistic: {
            title: {
                offsetY: -4,
                customHtml: (_: any, __: any, datum: any) => {
                    const text = datum ? datum.type : '总计';
                    return <span style={{ fontSize: 12 }}>{text}</span>;
                },
            },
            content: {
                style: {
                    fontSize: 8,
                    whiteSpace: 'pre-wrap',
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                },
                customHtml: (_: any, __: any, datum: any, data: any) => {
                    const text = datum ? `${datum.value} 个` : `${data.reduce((r, d) => r + d.value, 0)} 个`;
                    return <span style={{ fontSize: 12 }}>{text}</span>;
                },
            },
        },
        style: {
            height: 75,
            width: 75,
            marginTop: 4,
        }
    };
    return (
        <>
            {type ? <Pie {...config} data={data} /> : null}
        </>
    );
};

export default DemoPie;